<template>
    <div class="container">
        <main class="look-wrap">
            <nav class="look-nav">
                <router-link 
                    v-for="(item,i) in navData"
                    :to="item.path"
                    :key="i"
                >
                    {{item.title}}
                </router-link>
            </nav>
            <section class="look-con">
                <router-view></router-view>
            </section>
        </main>
        <my-foot></my-foot>
    </div>
</template>
<script>
import {routes} from '@/router'
export default {
    computed:{
        navData(){
            return routes.find(item => item.path === '/look').children.filter(val => val.meta && val.meta.title).map(v => {
                return {
                    path:v.path,
                    title:v.meta.title
                }
            })
        }
    },
    data(){
        return {
            list:[]
        }
    },
    mounted(){
        //真实的dom
        // this.list = [1,2,3,4];
        // console.log("children====1111",this.$refs.wrap.children.length); //0
        // this.$nextTick(() => { //保证dom更新完成
        //     // new swiper()
        //     console.log("children===nexttick=",this.$refs.wrap.children.length); //4
        // })
        // console.log("children====2222",this.$refs.wrap.children.length); //0
    }
}

/**
 * vue 生命周期就是在特定阶段触发的函数   注：不能写成箭头函数
 * 
 * 创建阶段
 * beforeCreated   没有this  this.$el this.$data
 * created         data methods computed 添加到this上,属性名不能重复  发送ajax请求
 * 
 * beforeMount     挂载前    找不到真实的dom
 * mounted         挂载成功  可以访问到真实的dom
 * 
 * $nextTick(()=>{
 *  保证dom更新完毕，才会触发此回调函数
 * })   
 * 
 * 更新阶段
 * beforeUpdate   更新前
 * updated        更新完成    注：一定不能设置值，避免进入死循环
 * 
 * 销毁阶段
 * beforeDestory  销毁前     清除定时器，添加的事件..      
 * destoryed      销毁成功
 * 
*/
</script>

<style scoped>
    .active{
        color:red;
    }
    .look-wrap{
        width:100%;
        display: flex;
        flex-direction: column;
    }
    .look-nav{
        width:100%;
        height: 40px;
        background: lightblue;
        line-height: 40px;
    }
    .look-con{
        width:100%;
        flex:1;
        overflow: auto;
    }
</style>

 